<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/axios.min.js"></script>
  <script src="js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
</head>
<body>

<style>

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
    height: 200px;
    margin: auto;
    margin-top:30px ;
  }





  .btn-add{
    font-size: 14px;
    float: right;
  }

  /*.pagerstyle{*/
  /*    margin-left: 1247px;*/
  /*}*/

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


  .container-filter{
    height: 140px;
  }

  .operate-container{
    height: 60px;
    margin-bottom:20px;
  }

  .search-top{
    padding-bottom: 25px;
  }


</style>

<div id="app">


  <el-card class="box-card container-filter" shadow="never">
    <div class="search-top">
      <i class="el-icon-search"></i>
      <span> 筛选搜索</span>
      <el-button style="float: right;font-size: 12px" class="el-button--primary" @click="query(1)">查询结果</el-button>
      <el-button style="float: right;font-size: 12px; margin-right: 15px" @click="resetInput">重置</el-button>
    </div>
    <div>
      <el-form :inline="true" class="demo-form-inline"
               style="display: flex; align-items: center">
        <div>
          <el-form-item label="输入搜索:"  >
            <el-input v-model="name" placeholder="商品名称" style="padding-right: 0px;width: 219px"></el-input>
          </el-form-item>

        </div>

        <div>

          <el-form-item label="商品状态:"  >
            <el-select v-model="status" placeholder="请选择">
              <el-option
                      v-for="item in statusOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

      </el-form>
    </div>
  </el-card>

  <el-card class="box-card operate-container " shadow="never">
    <i class="el-icon-tickets"></i>
    <span>数据列表</span>

  </el-card>

  <el-table :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            stripe
            class="el-table--border  "
            :data="tableData.data">
    <el-table-column prop="proid" label="商品编号" width="150"></el-table-column>
    <el-table-column prop="proname" label="商品名称"></el-table-column>

    <el-table-column prop="" label="图片">
      <template slot-scope="scope">
        <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.image"
                fit="contiain">
        </el-image>
      </template>
    </el-table-column>

    <el-table-column prop="" label="状态" width="130px">
      <!--            商品上架和推荐  加入插槽后开关就能移动了-->
      <template slot-scope="scope">
        <el-switch
                v-model="scope.row.status"
                inactive-text="上架:"
                active-color="#409EFF"
                inactive-color="#ff4949"
                :active-value="shoppingActive"
                :inactive-value="shoppingInactive"
                @change="changeStatus(scope.row)"
                inactive-color = "red">
        </el-switch>
      </template>

    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row);">添加图片
        </el-button>

       <a :href="'imageDetails.html?proid='+scope.row.proid"> <el-button
                size="mini"
                >查看详情
        </el-button></a>

      </template>
    </el-table-column>
  </el-table>

  <el-footer style="text-align: right">
    <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                   background :page-sizes="[10,15,20]"
                   layout="total,sizes,prev, pager,next,jumper"
                   :total="tableData.total"
                   :current-page.sync="tableData.page">
    </el-pagination>
  </el-footer>

  <el-dialog title="图片添加" :visible.sync="dialogFormVisible"  :close-on-click-modal = "false">
    <div style="display: flex; justify-content: space-around;" >
      <!--        图片上传-->
      <!--        这里的name是为了将文件上传默认file改成我们设置的image-->
      <el-upload
              name = "image"
              class="avatar-uploader"
              action="UploadImageServlet.s"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
        <img v-if="editData.image" :src="editData.image" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>


    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveProduct">确 定</el-button>
    </div>

  </el-dialog>
</div>
</body>
<script>

  var v = new Vue({
    el: "#app",
    data: {
      name: "",
      tid: "",
      tname : "",
      status: "",
      price : "",
      proid : "",
      pageSize : 10,
      shoppingActive : "1",
      shoppingInactive : "0",
      editData: { image: "",proid : ""},
      dialogFormVisible: false,
      formLabelWidth: "100px",

      // 状态下拉框
      statusOption: [{
        value: '',
        label: '全部'
      }, {
        value: '1',
        label: '上架'
      }, {
        value: '0',
        label: '下架'
      }],
      //表格数据
      tableData: {page:1}
    },
    created(){
      this.query(1);
      this.queryType();
    },
    methods: {


      handleSelect(item) {
        console.log(item);
      },
      handleEdit(index, data) {
        // 修改
        this.create();
        this.editData.proid = data.proid;
        this.dialogFormVisible = true;
      },

      handleDelete(index, row) {
        console.log(index, row);
      },
      query(page) {
        axios.get("ProductServlet.s",{
          params: {
            name : this.name,
            tid : this.tid,
            status : this.status,
            price : this.price,
            currentPage : page, //当前页数
            pageSize: this.pageSize //每页显示条目个数
          }
        }).then(res=>{
          this.tableData = res.data;
          for (let d in this.tableData) {
            if (d.status == 1){
              this.tableData.status = true;
            } else{
              this.tableData.status = false;
            }
          }
          this.tableData.page = page;
        })
      },
      sizeChange(page){
        this.pageSize =page;
        this.query(1);
      },
      // 物理删除
      remove(data){
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          axios.get("RemoveProductServlet.s", {
            params: {
              id: data.proid,
              flag: "物理删除"
            }
          }).then(res =>{
            this.$message({
              type: 'success',
              message: res.data.msg,
            });
            this.query(1);
          })
        }).catch( ()=> {
          this.$message({
            type: 'info',
            message:"已取消删除!"
          });
        });
      },

      // 添加
      saveProduct(){
        // 构建post参数
        var params = new URLSearchParams();

        for (let name in this.editData){
          params.append(name, this.editData[name]);
        }

        // 发送 ajax post 请求
        axios.post("AddImageServlet.s", params).then(res=>{
          if (res.data.code == 1){
            this.$message(res.data.msg);
            this.query(1); // 刷新表格
            this.dialogFormVisible = false; // 关闭弹窗
          } else{
            this.$alert(res.data.msg);
          }
        })
      },
      create(){
        this.dialogFormVisible = true;
      },
      // 图片上传组件
      // 上传之后
      handleAvatarSuccess(res, file) {
        // res 是后台返回的结果， 不过，此res != axios.res
        // res ==> axios.res.data
        // res.data ==> webpath
        // 注意 / 前面所代表的前缀
        // res.data.substring(1); 也可
        this.editData.image = "."+res.data;
        this.$forceUpdate();
      },
      // 上传之前
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image/') > -1;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 图片 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //逻辑删除
      changeStatus(row){

        var url = "RemoveProductServlet.s";
        axios.get(url,{
          params : {
            id : row.proid,
            status : row.status,
            flag : "逻辑删除"
          }
        }).then(res=>{
          console.info(res.data.msg);
          this.$message(res.data.msg);
        });
      },
      //查询框重置
      resetInput(){
        this.name = "";
        this.type = "";
        this.status = "";
        this.price = ""

      },
      queryType(){
        axios.get("QueryTypeNameServlet.s",null).then(res=>{
          this.typesOption = res.data;
          this.restaurants = res.data;
        })
      },
      resetInput(){
        this.name ="";
        this.tid = "";
        this.status ="";
        this.price = "";
      }
    },

  });
</script>

</html>